<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EChartsComponent',
  mounted () {
    const myChart = echarts.init(this.$refs.echarts)
    myChart.setOption({
      title: {
        text: '多个折现图'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          // 维度X   维度Y   其他维度 ...
          data: [120, 132, 101, 134, 90, 230, 210],
          // 平滑 如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线
          smooth: true,
          // 数据颜色
          color: 'green',
          // 折线样式
          lineStyle: {
            color: 'red',
            width: 2,
            type: 'solid'
          },
          // 折线显示数据
          label: {
            show: true
          },
          // 标注
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              {
                type: 'min',
                name: '最小值',
                // 标记的图形。//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                symbol: 'circle',
                // 标记的大小。
                symbolSize: 60,
                // 标记的旋转角度。
                symbolRotate: 0,
                // 标记的文字。
                label: {
                  show: true,
                  // top / left / right / bottom / inside / // 绝对的像素值 position: [10, 10], // 相对的百分比 position: ['50%', '50%'],
                  position: "inside",
                  // 距离图形元素的距离 当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                  distance: 2,
                  rotate: 0,
                  color: "rgba(0, 0, 0, 1)",
                  fontSize: 12,
                  // formatter: '{b}:{c}'
                  formatter: (params) => params.value // '{@score}'
                }
              },
              {
                name: '固定 x 像素位置',
                yAxis: 10,
                x: '90%'
              },
            ]
          },
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped></style>
